<template>
	<view>
		<!-- 空购物车 -->
		<view class='empty-box' v-if="!list.length">
			<image src="https://jyduowei.oss-cn-qingdao.aliyuncs.com/empty-cart.png" mode="widthFix" class="empty-img"></image>
			<view class="empty-msg">您可以把喜欢的商品加入购物车</view>
			<view class="empty-btn" @tap="toSee()">
				<cart-btn width="400">去逛一逛</cart-btn>
			</view>
		</view>
		<!-- 购物车列表 -->
		<view class="cart-list check-box-one" v-else>
			<checkbox-group @change="changeCart">
				<view class="cart-item" v-for="(item,key) in list">
					<view class="cart-radio">
						<checkbox :value="item.id.toString()" :checked="item.checked" style="transform: scale(0.7);"/>
					</view>
					<view class="cart-goods">
						<goods-list  :goods_list = "setGoodsArr(item)" :is_same ="item.is_same" :img_style="1"></goods-list>
						<!-- 删除按钮 -->
						<view class="delete-cart" @tap="deleteCart(item.id)"><i class="icon">&#xe634;</i></view>
						<!-- 设置数量 -->
						<view class="cart-num-set">
							<view class="num-btn" @tap="setNum(item.id,key,1)"><i class="icon">&#xeaf5;</i></view>
							<view class="num-input">
								<input type="number" v-model="item.goods_num" class="num-input-num" disabled="true"/>
							</view>
							<view class="num-btn" @tap="setNum(item.id,key,2)"><i class="icon">&#xe644;</i></view>
						</view>
					</view>
					<view class="see-more" @tap="seeMore(key)">查看更多
						<i class="icon" v-if="!item.show">&#xe70d;</i>
						<i class="icon" v-else>&#xe70c;</i>
					</view>
					<view class="made-info" v-if="item.show">
						<!-- 标题 -->
						<view class="made-title">
							<view class="made-title-icon"></view>
							<view class="made-title-txt">定制信息</view>
							<view class="made-title-btn" @tap="refreshMade(item.goods_id,item.id)"><i class="icon">&#xe643;</i>更新设计</view>
						</view>
						<!-- 定制信息 -->
						<view class="made-info-made" v-if="item.is_same">
							<view class="made-item" v-for="made_item in item.made_info[0]">
								<view class="unit-info"><text>部件:</text>{{made_item.unit_name}}</view>
								<view class="material-info"><text>材质：</text>{{made_item.material_name}}</view>
								<view class="color-info"><text>颜色：</text>{{made_item.color_name}}</view>
							</view>
						</view>
						<view v-else>
							<view :class="key == 0 ? 'made-info-made' : 'made-info-made made-right'" v-for="(items,keys) in item.made_info">
								<view class="made-area"><i class="icon">&#xe68e;</i>{{keys == 0 ? '左脚' : '右脚'}}</view>
								<view class="made-item" v-for="made_item in items">
									<view class="unit-info"><text>部件:</text>{{made_item.unit_name}}</view>
									<view class="material-info"><text>材质：</text>{{made_item.material_name}}</view>
									<view class="color-info"><text>颜色：</text>{{made_item.color_name}}</view>
								</view>
							</view>
						</view>
						<view class="made-info-made made-words" v-if="item.words_info.length">
							<view class="made-area">绣字信息</view>
							<template  v-for="words_item in item.words_info">
								<view class="made-item">
									<view class="unit-info"><text>区域:</text>{{words_item.name}}</view>
									<view class="material-info"><text>字体：</text>{{words_item.font}}</view>
									<view class="color-info"><text>文字：</text>{{words_item.txt}}</view>
								</view>
							</template>
						</view>
					</view>
				</view>
			</checkbox-group>
			<view style="height: 120upx;"></view>
			<!-- 底部操作栏 -->
			<view class="cart-bottom">
				<view class="cart-bottom-left">
					<view class="radio-all check-box-one">
						<checkbox-group @change="selectAll">
							<checkbox :checked="all_check"  class="all-radio" />
						</checkbox-group>
						<view>全选</view>
					</view>
					<view class="bottom-total">
						<view>共{{cart_ids.length}}件</view>
						<view>合计：<text class="cart-price">￥{{total_price}}</text></view>
					</view>
				</view>
				<view class="cart-bottom-right" @tap="toCalu()">去结算</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import cartBtn from '../../components/unit/button.vue';
	import goodsList from '../../components/order/goods-list.vue';
	export default{
		components:{ cartBtn , goodsList },
		data(){
			return {
				list : [],
				cart_ids : [],
				all_check : false,
				total_price : 0
			}
		},
		onShow() {
			this.getData();
		},
		methods:{
			//更新定制
			refreshMade(goods_id,cart_id){
				uni.navigateTo({
					url:'/pages/goods/detail?id='+goods_id+'&cart_id='+cart_id
				})
			},
			//查看更多
			seeMore(key){
				this.list[key].show = this.list[key].show ? false : true;
				this.$forceUpdate()
			},
			//设置商品数量
			setNum(id,key,state){
				if(state == 1 ) {
					if(this.list[key].goods_num <= 1){
						this.list[key].goods_num = 1;
						return false;
					}
					this.list[key].goods_num -- ;
				} else {
					this.list[key].goods_num ++;
				}
				this.ajax('cart/setNum',{
					data:{id : id , goods_num : this.list[key].goods_num},
					success:(res) =>{
						if(res.code == 0)this.toast(res.msg)
					}
				})
			},
			//去结算
			toCalu(){
				if(!this.cart_ids.length)return this.toast('请选择要支付项');
				this.ajax('order/cartOrder',{
					data:{cart_id : this.cart_ids},
					success:(res) =>{
						if(!res.code) return this.toast(res.msg);
						uni.navigateTo({
							url:'/pages/order/add?order_id='+res.msg
						})
					}
				});
				console.log(this.cart_ids);
			},
			//删除购物车
			deleteCart(id){
				uni.showModal({
				    title: '提示',
				    content: '确定删除该条记录？',
				    success: (res) => {
				        if (res.confirm) {
							this.ajax('cart/deleteCart',{
								data:{id :id},
								success:(res) => {
									this.toast(res.msg);
									if(res.code) {
										setTimeout(()=>{
											this.getData();
										},1000)
									}
								}
							})
				        } else if (res.cancel) {
				        }
				    }
				});
				console.log(id)
			},
			//获取购物车列表
			getData(){
				this.ajax('cart/cartList',{
					success:(res) =>{
						this.list = res.msg;
						for(var i in this.list) {
							this.list[i].checked = false;
							this.list[i].show = false;
						}
						console.log(res);
					}
				})
			},
			//去逛一逛
			toSee(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			//复选操作
			changeCart(e){
				this.cart_ids = e.detail.value;
				this.all_check = this.cart_ids.length == this.list.length ? true : false;
				this.$forceUpdate();
			},
			//全选
			selectAll(e){
				var all = e.detail.value.length;
				this.cart_ids = [];
				if(!all) {
					this.cart_ids = [];
					for(var i in this.list) {
						this.list[i].checked = false;
					}
				} else {
					for(var i in this.list) {
						this.list[i].checked = true;
						this.cart_ids.push(this.list[i].id);
					}
					
				}
				this.$forceUpdate();
			},
			//设置商品数组
			setGoodsArr(data){
				var list = [];
				for(var i in data.made_info) {
					list.push(data);
				}
				return list;
			},
			//计算商品价格
			caluGoodsPirce(){
				this.total_price = 0 
				for(var i in this.list) {
					for(var x in this.cart_ids) {
						if(this.list[i].id == this.cart_ids[x]) {
							this.total_price += parseFloat(this.list[i].goods_price)
						}
					}
				}
			}
		},
		watch:{
			cart_ids:{
				handler(val,old){
					this.caluGoodsPirce();
				},
				deep:true
			}
		}
	}
</script>

<style>
	@import url("../../static/css/cart/index.css");
</style>
